<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')">
    <view class="container">
      <view>
        <view style="height: 40vh;">
          <image src="@/static/images/banner/banner-1.png" mode="heightFix" />
        </view>

        <view>
          <uni-card>
            <uni-grid :column="3" :highlight="true" @change="goPage">
              <uni-grid-item v-for="(item, index) in pages" :index="index" :key="index">
                <view class="grid-item-box">
                  <image :src="item.imgUrl" class="image" mode="aspectFill" />
                  <text class="text">{{ item.title }}</text>
                </view>
              </uni-grid-item>
            </uni-grid>
          </uni-card>
        </view>
      </view>

      <view>
        <contract-popup :isShow="contractPopupShow" @ok="onContractOk"></contract-popup>
      </view>
    </view>
  </page-meta>
</template>

<script setup>
  import NP from 'number-precision'

  const data = reactive({
    show: false,
    pages: [{
      title: '小说',
      imgUrl: '',
      path: '/pages/novel/novel',
      isToken: false,
    }, {
      title: '游戏',
      imgUrl: '',
      path: '',
      isToken: false,
    }, {
      title: '工具',
      imgUrl: '',
      path: '',
      isToken: false,
    }],
    contractPopupShow: false,
  });
  const {
    show,
    pages,
    contractPopupShow
  } = toRefs(data);

  onLoad((options) => {
    console.log('index-on-load');
    // #ifdef MP-WEIXIN
    console.log('参数', options);
    if (!util.judgeNull(options) && Object.keys(options).length > 0) {
      util.sharedParameterAnalysis(options);
    }
    // #endif
  })
  onShow(() => {
    console.log('index-on-show');
    // queryDataGroup();
  })
  onMounted(async () => {
    console.log('index-on-mounted');
    if (!util.judgeNull(uni.getStorageSync('Token'))) onSignContract();
  })
  onPullDownRefresh(() => {
    // 模拟加载
    setTimeout(() => {
      load.getAllData();
      // queryDataGroup();
      uni.stopPullDownRefresh(); // 停止下拉刷新
    }, 1000)
  })

  const queryDataGroup = () => {
    getIndexImgs();
    getNoticeList();
  }

  /**
   * 加载轮播图
   */
  const getIndexImgs = () => {
    http.get('/indexImgs').then(({
      data
    }) => {
      indexImgs.value = data;
      seq.value = data;
    })
  }

  const getNoticeList = () => {
    // 加载公告
    http.get('/shop/notice/topNoticeList').then(({
      data
    }) => {
      news.value = data;
    })
  }

  /**
   * 跳转公告列表页面
   */
  const onNewsPage = () => {
    uni.navigateTo({
      url: '/pages/recent-news/recent-news'
    })
  }

  const goPage = (e) => {
    let {
      index
    } = e.detail
    let page = data.pages[index] || {};
    if (onLogin(page.isToken)) {
      if (!util.judgeNull(page.path)) {
        uni.navigateTo({
          url: page.path
        })
      } else {
        tip.toast('未设置路径');
      }
    }
  }

  const onLogin = (isToken) => {
    if (isToken) {
      if (util.judgeNull(uni.getStorageSync('Token'))) {
        http.toReLaunchLogin('/pages/index/index');
        return false;
      } else {
        return onSignContract();
      }
    } else {
      return true;
    }
  }

  const onSignContract = () => {
    let userInfo = uni.getStorageSync('loginUserInfo') || {};
    if (util.judgeNull(userInfo.agreeAgreementPolicy) || userInfo.agreeAgreementPolicy == '0') {
      data.contractPopupShow = true;
      return false;
    }
    return true;
  }

  const onContractOk = () => {
    data.contractPopupShow = false;
  }
</script>

<style scoped lang="scss">
  @use './index.scss';
</style>
